<template>
  <div class="home" ref="home">
    <!-- 头部 -->
    <div class="home_top"></div>
    <!-- 左侧 -->
    <div class="home_left">
      <SmartLeft />
    </div>
    <!-- 中间 -->
    <div class="home_center">
      <SmartCenter />
    </div>
    <!-- 右侧 -->
    <div class="home_right">
      <SmartRigth />
    </div>
    <!-- 底部 -->
    <div class="home_bottom">
      <!-- 底部tab切换 -->
      <div class="home_bottom_center">
        <div
          class="home_bottom_center_img"
          v-for="(item, index) in imgs"
          :key="index"
          @click="handleClick(index)"
        >
          <img
            :src="index === active ? item.activeImg : item.img"
            width="100%"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, onBeforeMount } from 'vue';
import img1 from '@/assets/images/智能检测 Normal.png';
import img2 from '@/assets/images/智能检测.png';
import img3 from '@/assets/images/就业态势 Normal.png';
import img4 from '@/assets/images/就业态势.png';
import img5 from '@/assets/images/安防管理 Normal.png';
import img6 from '@/assets/images/安防管理.png';
import img7 from '@/assets/images/设备运维 Normal.png';
import img8 from '@/assets/images/设备运维.png';
import SmartCenter from '@/components/Smart/Center/index.vue';

const imgs = [
  {
    img: img1,
    activeImg: img2,
  },
  {
    img: img3,
    activeImg: img4,
  },
  {
    img: img5,
    activeImg: img6,
  },
  {
    img: img7,
    activeImg: img8,
  },
];
onMounted(() => {
  if(localStorage.getItem('active')){
    active.value=localStorage.getItem('active')
  }
  // 可以在这里添加一些初始化逻辑
});

const home = ref(null);
const active = ref((localStorage.getItem('active')) || 0);

const handleClick = (index) => {
  active.value = index;
  localStorage.setItem('active', index.toString());
};

onBeforeUnmount(() => {
  // 可以在这里添加一些清理逻辑
});
</script>

<style scoped>
.home {
  background: #03012a;
  height: 100vh;
  width: 100%;
  position: relative;
  transform-origin: top left;
}

/* 首页头部 */
.home_top {
  background: url("@/assets/images/Top.png");
  background-size: 100% 100%;
  width: 100%;
  height: 11.7vh; /* 使用 vh 单位 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

/* 首页左部 */
.home_left {
  background: url("@/assets/images/Left.png");
  background-size: 100% 100%;
  width: 31.7vw;
  height: 100vh; /* 使用 vh 单位 */
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
}
/* 首页右部 */
.home_right {
  background: url("@/assets/images/Right.png");
  background-size: 100% 100%;
  width: 31.7vw;
  height: 100vh; /* 使用 vh 单位 */
  opacity: 1;
  position: absolute;
  top: 0;
  right: 0;
}

/* 首页中间 */
.home_center {
  background-size: 100% 100%;
  width: 40vw; /* 使用 vw 单位 */
  height: 40vw; /* 使用 vw 单位 */
  z-index: 999;
  position: absolute;
  left: calc(50% - 20vw); /* 使用 vw 单位 */
  top: calc(50% - 20vw); /* 使用 vw 单位 */
}

/* 首页底部 */
.home_bottom {
  background: url("@/assets/images/菜单栏.png");
  background-size: 100% 100%;
  width: 57vw;
  height: 12vh; /* 使用 vh 单位 */
  z-index: 999;
  position: absolute;
  left: calc(50% - 29.5%);
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.home_bottom_center {
  width: 39%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.home_bottom_center_img {
  width: 25%;
}

/* 媒体查询，针对小屏幕设备进行调整 */
@media (max-width: 768px) {
  .home_left,
  .home_right {
    width: 25%;
  }

  .home_center {
    width: 50vw;
    height: 50vw;
    left: calc(50% - 25vw);
    top: calc(50% - 25vw);
  }

  .home_left_title,
  .home_rigth_title {
    font-size: 1.5vw;
  }

  .home_left_titleimg,
  .home_rigth_titleimg {
    width: 5vw;
  }
}

</style>